<template>
	<div class="y-cont">
		<div class="y-wrap">
			<div class="y-nav">
				<!--全部分类-->
				<div class="y-quanbu">
					<span>全部分类 &nbsp;<img src="../../assets/img/shouye/bottom.png"/></span>
				</div>
				<!--首页-->
				<div class="y-shouye">
					<a href="/">首页</a>
				</div>
				<!--同城-->
				<div class="y-tongcheng">
					<a href="#/TongCheng">同城</a>
				</div>
				<!--礼拜五-->
				<div class="y-five">
					<a href="#/Firday">礼拜五</a>
				</div>
				<!--积分商城-->
				<div class="y-shop">
					<a>积分商城</a>
				</div>
				<!--导航-->
				<div class="y-daohang">
					<a>导航+</a>
				</div>
			</div>
			<!--导航栏分类-->
			<div class="y-fenleixiangx">
			<div class="y-fenlei">
				<ul>
					<li>
						<a href="#"><span><img src="../../assets/img/shouye/shuiguo.png"/>新鲜水果</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/haixian.png"/>生活海鲜</span></a>
					</li>
						<li>
					<a href="#"><span><img src="../../assets/img/shouye/roulei.png"/>肉类家禽</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/niunai.png"/>蛋奶素食</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/shucai.png"/>田园蔬菜</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/lingshi.png"/>零食酒水</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/liangyou.png"/>粮油杂货</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/lihe.png"/>礼品卡券</span></a>
					</li>
					<li>
					<a href="#"><span><img src="../../assets/img/shouye/jiaju.png"/>家具用品</span></a>
					</li>
				
				</ul>
			</div>
			<div class="y-xiangx">
				<ul v-for="li in 8">
					<li>
						<div>
						<p>应季鲜果</p>
						<span>草莓</span>
						<span>葡萄</span>
						<span>香蕉</span>
						<span>苹果</span>
						</div>
						<div>
						<span>草莓</span>
						<span>葡萄</span>
						<span>香蕉</span>
						<span>苹果</span>
						</div>
					</li>
				</ul>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		components: {
			
		},
		methods:{
			nav:function(){
				$(".y-shouye,.y-tongcheng,.y-five,.y-shop,.y-daohang").mouseover(function(){
					$(this).addClass("active").siblings().removeClass("active");
				});
				$(".y-quanbu").mouseover(function(){
					$(".y-fenlei").slideDown(300);
					$(".y-fenleixiangx").css("display","block");
				});
				$(".y-shouye").mouseover(function(){
//					$(".y-fenlei").slideUp(1000);
				});
				$(".y-fenlei ul li").mouseover(function(){
					$(this).addClass("active1").siblings().removeClass("active1");
					$(".y-fenleixiangx").css("display","block");
				});
				$(".y-fenlei ul li,.y-xiangx").mouseover(function(){
					$(".y-xiangx").css("display","block");
					$(".y-fenlei").show();
				});
				$(".y-fenlei ul li").mouseleave(function(){
					$(".y-xiangx").css("display","none");
					$(".y-fenlei").hide();
				});
				$(".y-fenleixiangx").css("display","none");
				$(".y-quanbu").mouseleave(function(){
					$(".y-fenleixiangx").css("display","none");
				});
				$(".y-xiangx").mouseleave(function(){
					$(this).hide();
					$(".y-fenlei").hide();
				});
				$(".y-fenlei").mousemove(function(){
					$(".y-xiangx").show();
					$(".y-fenlei").show();
				});
			}
		},
		mounted: function() {
			this.nav();
		}
			
	}
</script>

<style scoped="scoped">
	.y-cont{
	width: 100%;
	display: flex;
	justify-content: center;
	}
	.y-wrap{
		position: relative;
		width: 1280px;
	}
	.y-nav{
		width: 910px;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 50px;
	}
	.y-nav div{
		width: 151px;
		height: 50px;
		font-size: 16px;
		line-height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.y-nav div>a{
		display: flex;
		justify-content: center;
		line-height: 16px;
		width: 151px;
		height: 16px;
		border-right: 1px solid #CCCCCC;
	}
	.active{
		background: #f08200;
		
	}
	.active a{
		color: #FFFFFF;
	}
	.y-fenlei{
		width: 151px;
		height: 500px;
		border:1px solid #A9A9A9;
		display: none;
		background: #FFFFFF;
		border-bottom: none;
	}
	.y-fenlei ul li{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 151px;
		height: 53.55px;
		border-bottom: 2px solid #DCDCDC;
	}
	.fenlei ul li a{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.y-fenlei ul li a span{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.y-fenlei ul li a span img{
		padding-right:11px;
	}
	.y-fenleixiangx{
		/*display: none;*/
		z-index: 200;
		position: absolute;
		width: 612px;
		height: 500px;
		display: flex;
		justify-content: space-between;
	}
	.y-xiangx{
		position: absolute;
		top: 0;
		left: 153px;
		width: 460px;
		height: 502px;
		background:rgb(244,245,237);
		display: none;
	}
	.y-xiangx ul li div>p{
		text-align: center;
		color: cyan;
		font-size: 20px;
	}
	.y-xiangx ul li div>span{
		padding: 10px;
		margin-left: 50px;
		color: red;
	}
	.active1{
		background:rgb(244,245,237) ;
	}
</style>